<template>
	<view class="set-list">
		<view class="set-item" @tap='goSet(1)'>
			<view class="item-left">
				<text class="set-name">中文</text>
			</view>
			<image v-if="current === 1" class="item-right" src="/static/mine/checkked.png"></image>
		</view>
		<view class="set-item" @tap='goSet(2)'>
			<view class="item-left">
				<text class="set-name">English</text>
			</view>
			<image v-if="current === 2" class="item-right" src="/static/mine/checkked.png"></image>
		</view>
		<view class="set-item" @tap='goSet(3)'>
			<view class="item-left">
				<text class="set-name">Bahasa Indonesia</text>
			</view>
			<image v-if="current === 3" class="item-right" src="/static/mine/checkked.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:1
			};
		},
		methods: {
			goSet(i) {
				this.current = i

			}
		}
	}
</script>

<style lang="scss" scoped>
	.set-list {
		border-top: 20rpx solid #f4f5f9;
		background-color: #FFFFFF;

		.set-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 27rpx 37rpx;
			border-bottom: 1px solid #EEEEEE;
		}

		.item-left {
			position: relative;
			display: flex;
			align-items: center;

			.set-name {
				font-size: 30rpx;
				margin-left: 13rpx;
			}

		}

		.item-right {
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>
